<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.5">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        .btn_st {
            position: absolute;
            opacity: 0.0;
            bottom: 0%;
            left: 0%;
            width: 50%;
            height: 100%;
            z-index: 100;
        }

        .btn_rand {
            position: absolute;
            opacity: 0.0;
            bottom: 0%;
            right: 0%;
            width: 50%;
            height: 100%;
            z-index: 100;
        }

        .btn_stop {
            opacity: 0.0;
        }

        #imageContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .goldCoin {
            position: absolute;
            top: 0;
            left: 50%;
            width: 40px;
            height: auto;
            transform: translateX(-50%);
            animation: fall 2s linear forwards;
            opacity: 0; /* Initially invisible */
        }

        @keyframes fall {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.9;
            }
            100% {
                transform: translateX(-50%) translateY(100vh);
                opacity: 0;
            }
        }

        @keyframes fallAndRotate {
            0% {
                opacity: 1;
                transform: translateX(-50%) rotate(0deg);
            }
            50% {
                opacity: 0.9;
            }
            100% {
                transform: translateX(-50%) translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
    <link rel="preload" href="datas/image0.png" as="image" />
    <link rel="preload" href="datas/image1.png" as="image" />
    <link rel="preload" href="datas/image2.png" as="image" />
    <link rel="preload" href="datas/image3.png" as="image" />
    <link rel="preload" href="datas/image4.png" as="image" />
    <link rel="preload" href="datas/image5.png" as="image" />
    <link rel="preload" href="datas/image6.png" as="image" />
    <link rel="preload" href="datas/image7.png" as="image" />
    <link rel="preload" href="datas/image8.png" as="image" />
    <link rel="preload" href="datas/image9.png" as="image" />
</head>
<body style="background-color: #FF0C10">
    <button class="btn_st" onclick="startScroll()">开始</button>
    <button class="btn_stop" onclick="pauseScroll()">暂停</button>
    <button class="btn_rand" onclick="randomImage()">随机显示</button>
    <div id="imageContainer">
        <img src="datas/st.png">
    </div>

    <script>
        let isScrolling = false;
        const imageContainer = document.getElementById('imageContainer');
        const imagesPath = 'datas/';  // Assuming images are in the datas folder

        // Dictionary to store image filenames and their probabilities
        const imageProbability = {
            'image0.png': 0.0875,
            'image1.png': 0.0875,
            'image2.png': 0.0875,
            'image3.png': 0.1,
            'image4.png': 0.1,
            'image5.png': 0.1,
            'image6.png': 0.1,
            'image7.png': 0.1,
            'image8.png': 0.125,
            'image9.png': 0.125,
        };

        let imageFiles = Object.keys(imageProbability);

        function startScroll() {
            isScrolling = true;
            scrollImages();
        }

        function pauseScroll() {
            isScrolling = false;
            createGoldCoins();
        }

        async function scrollImages() {
            while (isScrolling) {
                shuffleArray(imageFiles);  // Shuffle images randomly
                for (let i = 0; i < imageFiles.length && isScrolling; i++) {
                    const imageUrl = imagesPath + imageFiles[i];
                    imageContainer.innerHTML = `<img src="${imageUrl}">`;

                    await new Promise(resolve => setTimeout(resolve, 50));
                }
            }
        }

        function randomImage() {
            if ( !isScrolling ) {
                return;
            }
            pauseScroll();  // Pause scrolling

            // Choose a random image based on probabilities
            const randomIndex = getRandomIndex();
            const randomImage = imageFiles[randomIndex];
            const imageUrl = imagesPath + randomImage;

            imageContainer.innerHTML = `<img src="${imageUrl}">`;
        }

        async function createGoldCoins() {
            while (!isScrolling) {
                const goldCoin = document.createElement('img');
                goldCoin.src = 'datas/jyb.png';
                goldCoin.alt = 'Gold Coin';
                goldCoin.classList.add('goldCoin');
                goldCoin.style.left = `${Math.random() * 100}%`;  // Random horizontal position
                document.querySelector("body").appendChild(goldCoin);

                await new Promise(resolve => setTimeout(resolve, Math.random() * 200));
            }

        }

        function getRandomIndex() {
            const totalProbability = Object.values(imageProbability).reduce((acc, prob) => acc + prob, 0);
            const randomValue = Math.random() * totalProbability;

            let currentProbability = 0;
            for (let i = 0; i < imageFiles.length; i++) {
                currentProbability += imageProbability[imageFiles[i]];
                if (randomValue <= currentProbability) {
                    return i;
                }
            }

            return 0;
        }

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
    </script>
</body>
</html>
